<template>
  <div class="nav-header">
    <el-icon size="30" @click="handleFoldClick" class="fold-menu">
      <component :is="foldIcon"></component>
    </el-icon>
    <div class="content">
      <cy-breadcrumb :breadcrumbs="breadcrumbs"></cy-breadcrumb>
      <user-info></user-info>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import userInfo from './user-info.vue'
import cyBreadcrumb from '@/base-ui/breadcrumb'
import { pathMapToBreadcrumbs } from '@/utils/map-menus'
import { useStore } from '@/store'
import { useRoute } from 'vue-router'

export default defineComponent({
  emits: ['handleFoldClick'],
  components: {
    userInfo,
    cyBreadcrumb
  },
  setup(props: any, context: any) {
    const handleFoldClick = () => {
      asideFoldStatus.value = !asideFoldStatus.value
      context.emit('handleFoldClick', asideFoldStatus.value)
    }
    const asideFoldStatus = ref(true)
    const foldIcon = computed(() => {
      return asideFoldStatus.value ? 'Expand' : 'Fold'
    })
    //总： 面包屑的数据：[{name: ,path: }]，去pathMapToMenu中添加一个空数组，获取存入breadcrumbs[]。

    //1.3 调用函数，获取到breadcrumbs的数组中的数据
    const breadcrumbs = computed(() => {
      //1.1 但是还需要和menu.url匹配，使用useStore获取userMenus
      const store = useStore()
      const userMenus = store.state.loginModule.userMenus
      //1.2 拿到currentPath
      const route = useRoute()
      const currentPath = route.path
      return pathMapToBreadcrumbs(userMenus, currentPath)
    })

    return {
      asideFoldStatus,
      foldIcon,
      handleFoldClick,
      breadcrumbs
    }
  }
})
</script>

<style scoped lang="less">
.nav-header {
  display: flex;
  align-items: center;
  width: 100%;

  .fold-menu {
    cursor: pointer;
  }
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 0 20px;
  }
}
</style>
